<template>
  <el-row justify="space-between">

    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="el-wrap">
      <el-skeleton class="skeleton-wrap" :rows="7" :loading="chartsLoading">
        <el-card>
          <charts-base :option="chartsData.pie_chart" :dom-id="'main'"></charts-base>
        </el-card>
      </el-skeleton>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="el-wrap el-wrap2">
      <el-skeleton class="skeleton-wrap" :rows="7" animated :loading="chartsLoading">
        <el-card>
          <charts-base :option="chartsData.bar_chart" :dom-id="'main1'"></charts-base>
        </el-card>
      </el-skeleton>
    </el-col>
  </el-row>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import ChartsBase from "@/views/Home/components/ChartsBase.vue";

let chartsLoading = ref(true)
import {getCharts} from "@/api/common";

const chartsData = reactive({
  pie_chart: {},
  bar_chart: {},
})

onMounted(() => {
  getCharts().then(res => {
    chartsLoading.value = false
    nextTick(() => {
      chartsData.pie_chart = {
        title: {
          text: '学生报名来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },

        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '人数',
            type: 'pie',
            radius: '60%',
            center: ['50%', '60%'],
            label: {
              show: true,
              position: 'outside',
              formatter: '{a|{b}：{d}%}\n{hr|}',
              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 3,
                },
              }
            },
            data: res.data.pie_chart,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },

        ],
      }
      let seriesData = []
      let labelData = []
      let dataList = []
      res.data.bar_chart.data.forEach(item => {
        labelData.push(item.name)
        dataList.push(item.dataList)
        seriesData.push({
          "name": item.name,
          "type": "bar",
          "stack": "总量",
          "barMaxWidth": 35,
          "barGap": "10%",
          "itemStyle": {
            "normal": {
              "label": {
                "show": true,
                "textStyle": {
                  "color": "#fff"
                },
                "position": "inside",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data": item.dataList
        })
      })
      seriesData.push({
        "name": "总数",
        "type": "line",
        symbolSize: 10,
        symbol: 'circle',
        "itemStyle": {
          "normal": {
            "color": "rgba(252,230,48,1)",
            "barBorderRadius": 0,
            "label": {
              "show": true,
              "position": "top",
              formatter: function (p) {
                return p.value > 0 ? (p.value) : '';
              }
            }
          }
        },
        "data": res.data.bar_chart.amount
      })
      chartsData.bar_chart = {
        "title": {
          "text": "报名人数统计",
          'left': 'center'
        },

        "tooltip": {
          "trigger": "axis",
          "axisPointer": {
            "type": "shadow",
            textStyle: {
              color: "#fff"
            }

          },
        },
        "grid": {
          "borderWidth": 0,
          "top": "10%",
          "bottom": '5%',
          textStyle: {
            color: "#fff"
          }
        },
        "legend": {
          orient: 'vertical',
          left: 'left',
          "data": labelData
        },
        "calculable": true,
        "xAxis": [{
          "type": "category",
          "axisLine": {
            lineStyle: {
              color: '#90979c'
            }
          },
          "splitLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "splitArea": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "data": res.data.bar_chart.name
        }],
        "yAxis": [{
          "type": "value",
          "splitLine": {
            "show": false
          },

          "axisTick": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "splitArea": {
            "show": false
          },

        }],

        "series": seriesData
      }
    })
  })


})
</script>
<style scoped>
.el-wrap {
  margin-bottom: 20px;
  padding-right: 10px;
}

.skeleton-wrap {
  height: 340px;
  background-color: #fff;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
}
</style>